<%inherit file="base.html"/>

<%def name="headIncludes()">
<link rel="stylesheet" href="${http_root}css/bootstrap-select.min.css">
<link rel="stylesheet" href="${http_root}css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="${http_root}css/tautulli-dataTables.css">
</%def>

<%def name="body()">
<div class="container-fluid">
    <div class='table-card-header'>
        <div class="header-bar">
            <span><i class="fa fa-bar-chart"></i> Graphs</span>
        </div>
        <div class="button-bar">
            <div class="btn-group" id="user-selection">
                <label>
                    <select name="graph-user" id="graph-user" multiple>
                    </select>
                </label>
            </div>
            <div class="btn-group" style="margin-right: 2px;" data-toggle="buttons" id="yaxis-selection">
                <label class="btn btn-dark btn-filter">
                    <input type="radio" name="yaxis-options" id="yaxis-plays" value="plays" autocomplete="off"> Play Count
                </label>
                <label class="btn btn-dark btn-filter">
                    <input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
                </label>
            </div>
            <div class="input-group pull-right" style="width: 1px;" id="days-selection">
                <span class="input-group-addon btn-dark inactive">Last</span>
                <input type="number" class="form-control number-input" name="graph-days" id="graph-days" value="30" min="1" data-default="7" data-toggle="tooltip" title="Min: 1 day" />
                <span class="input-group-addon btn-dark inactive">days</span>
            </div>
            <div class="input-group pull-right" style="width: 1px;" id="months-selection">
                <span class="input-group-addon btn-dark inactive">Last</span>
                <input type="number" class="form-control number-input" name="graph-months" id="graph-months" value="12" min="1" data-default="12" data-toggle="tooltip" title="Min: 1 month" />
                <span class="input-group-addon btn-dark inactive">months</span>
			</div>
        </div>
    </div>
    <div class="table-card-back">
        <ul class="nav nav-list nav-pills" role="tablist" id="graph-tabs">
            <li role="presentation"><a id="nav-tabs-plays" href="#tabs-plays" aria-controls="tabs-plays" data-toggle="tab" role="tab">Media Type</a></li>
            <li role="presentation"><a id="nav-tabs-stream" href="#tabs-stream" aria-controls="tabs-stream" data-toggle="tab" role="tab">Stream Type</a></li>
            <li role="presentation"><a id="nav-tabs-total" href="#tabs-total" aria-controls="tabs-total" data-toggle="tab" role="tab">Play Totals</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="tabs-plays">
                <div class="row">
                    <div class="col-md-12">
                        <h4><i class="fa fa-history"></i> Daily <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by media type <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The total play count or duration of tv, movies, and music played per day. Click a graph point to open up a list of items played for that specific date.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_day">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music played per day of the week.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_dayofweek" style="float: left;">
                                <div class="graphs-load">
                                    <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music played per hour of the day.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_hourofday">
                                <div class="graphs-load">
                                    <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music played by top 10 most active platforms.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_platform" style="float: left;">
                                <div class="graphs-load">
                                    <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music played by top 10 most active users.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_user">
                                <div class="graphs-load">
                                    <i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="tabs-stream">
                <div class="row">
                    <div class="col-md-12">
                        <h4><i class="fa fa-video-camera"></i> Daily <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by stream type <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The total play count or duration of tv, movies, and music by the transcode decision. Click a graph point to open up a list of items played for that specific date.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_stream_type">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="concurrent-graph">
                    <div class="col-md-12">
                        <h4><i class="fa fa-video-camera"></i> Daily concurrent stream count</span> by stream type <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The total count of concurrent streams of tv, movies, and music by the transcode decision.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_concurrent_streams_by_stream_type">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-expand-arrows-alt"></i> <span class="yaxis-text">Play count</span> by source resolution <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv and movies by their original resolution (pre-transcoding).
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_source_resolution" style="float: left;">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4><i class="fa fa-expand-arrows-alt"></i> <span class="yaxis-text">Play count</span> by stream resolution <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv and movies by their streamed resolution (post-transcoding).
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_stream_resolution">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by platform and stream type <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music by platform and stream type.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_platform_by_stream_type" style="float: left;">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by user and stream type <small>Last <span class="days">30</span> days</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music by user and stream type.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_user_by_stream_type" style="float: left;">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="tabs-total">
                <div class="row">
                    <div class="col-md-12">
                        <h4><i class="fa fa-calendar"></i> Total <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by month <small>Last <span class="months">12</span> months</small></h4>
                        <p class="help-block">
                            The combined total of tv, movies, and music by month.
                        </p>
                        <div class="graphs-instance">
                            <div class="watch-chart" id="graph_plays_by_month">
                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</%def>

<%def name="modalIncludes()">
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
</div>
<div class="modal fade" id="info-modal" tabindex="-1" role="dialog" aria-labelledby="info-modal">
</div>
</%def>

<%def name="javascriptIncludes()">
<script src="${http_root}js/bootstrap-select.min.js"></script>
<script src="${http_root}js/highcharts.min.js"></script>
<script src="${http_root}js/jquery.dataTables.min.js"></script>
<script src="${http_root}js/dataTables.bootstrap.min.js"></script>
<script src="${http_root}js/dataTables.bootstrap.pagination.js"></script>

<script>
    var selected_user_id = null;

    // Modal popup dialog
    function selectHandler(selectedDate, selectedSeries) {

        try
        {
            var dateValue = new Date(selectedDate);
            var d = dateValue.getDate();
            var m = dateValue.getMonth() + 1;
            var y = dateValue.getFullYear();
            var dateString = '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);

            var media_type = null;
            var transcode_decision = null;
            switch(selectedSeries) {
                case "TV": media_type = 'episode'; break;
                case "Movies": media_type = 'movie'; break;
                case "Music": media_type = 'track'; break;
                case "Live TV": media_type = 'live'; break;
                case "Direct Play": transcode_decision = 'direct play'; break;
                case "Direct Stream": transcode_decision = 'copy'; break;
                case "Transcode": transcode_decision = 'transcode'; break;
            }
            
            $.ajax({
                url: "history_table_modal",
                cache: false,
                async: true,
                data: {
                    user_id: selected_user_id,
                    start_date: dateString,
                    media_type: media_type,
                    transcode_decision: transcode_decision
                },
                complete: function(xhr, status) {
                    $("#history-modal").html(xhr.responseText);
                    $('#history-modal').modal();
                }
            });
        }
        catch(err)
        {
          console.log("Failed to retrieve history modal data.");
        }
    }

    function getGraphVisibility(chart_name, data_series) {
        var chart_key = 'HighCharts_' + chart_name;
        var chart_visibility = JSON.parse(getLocalStorage(chart_key, null)) || [];

        chart_visibility = chart_visibility.reduce(function(obj, s) {
            obj[s.name] = s.visible;
            return obj;
        }, {});

        if (!("Total" in chart_visibility)) {
            chart_visibility["Total"] = false;
        }

        return data_series.map(function(s) {
            var obj = Object.assign({}, s);
            obj.visible = (chart_visibility[s.name] !== false);
            return obj
        });
    }

    function setGraphVisibility(chart_name, data_series, series_name) {
        var chart_key = 'HighCharts_' + chart_name;

        var chart_visibility = data_series.map(function(s) {
            return {name: s.name, visible: (s.name === series_name) ? !s.visible : s.visible}
        });

        setLocalStorage(chart_key, JSON.stringify(chart_visibility));
    }

    function getGraphColors(data_series) {
        var colors = {
            'TV': '#E5A00D',
            'Movies': '#FFFFFF',
            'Music': '#F06464',
            'Live TV': '#19A0D7',
            'Direct Play': '#E5A00D',
            'Direct Stream': '#FFFFFF',
            'Transcode': '#F06464',
            'Max. Concurrent Streams': '#96C83C',
            'Total': '#96C83C'
        };
        var series_colors = [];
        $.each(data_series, function(index, series) {
            series_colors.push(colors[series.name]);
        });
        return series_colors;
    }
</script>
<script src="${http_root}js/graphs/plays_by_day.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_dayofweek.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_hourofday.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_platform.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_user.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_stream_type.js${cache_param}"></script>
<script src="${http_root}js/graphs/concurrent_streams_by_stream_type.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_source_resolution.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_stream_resolution.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_platform_by_stream_type.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_user_by_stream_type.js${cache_param}"></script>
<script src="${http_root}js/graphs/plays_by_month.js${cache_param}"></script>
<script>
    $(document).ready(function () {

        // Initial values for graph from local storage
        var yaxis = getLocalStorage('graph_type', 'plays');
        var current_day_range = getLocalStorage('graph_days', 30);
        var current_month_range = getLocalStorage('graph_months', 12);
        var current_tab = '#' + getLocalStorage('graph_tab', 'tabs-plays');

        // Update tab values from upgrading
        switch (current_tab) {
            case '#tabs-1':
                current_tab = '#tabs-plays'
                break
            case '#tabs-2':
                current_tab = '#tabs-stream'
                break
            case '#tabs-3':
                current_tab = '#tabs-total'
                break
            default:
                break
        }

        if (window.location.hash === '#concurrent-graph') {
            current_tab = '#tabs-stream';
        }

        $('#yaxis-' + yaxis).prop('checked', true);
        $('#yaxis-' + yaxis).closest('label').addClass('active');
        $('#graph-days').val(current_day_range);
        $('#graph-months').val(current_month_range);
        $('#nav-' + current_tab.replace('#', '')).tab('show').trigger('show.bs.tab');
        //$(current_tab).addClass('active');


        $('.days').text(current_day_range);
        $('.months').text(current_month_range);
        
        // Load user ids and names (for the selector)
        $.ajax({
            url: 'get_user_names',
            type: 'get',
            dataType: "json",
            success: function (data) {
                let select = $('#graph-user');
                let by_id = {};
                data.sort(function(a, b) {
                    return a.friendly_name.localeCompare(b.friendly_name);
                });
                data.forEach(function(item) {
                    select.append('<option value="' + item.user_id + '">' +
                        item.friendly_name + '</option>');
                    by_id[item.user_id] = item.friendly_name;
                });
                select.selectpicker({
                    countSelectedText: function(sel, total) {
                        if (sel === 0 || sel === total) {
                            return 'All users';
                        } else if (sel > 1) {
                            return sel + ' users';
                        } else {
                            return select.val().map(function(id) {
                                return by_id[id];
                            }).join(', ');
                        }
                    },
                    style: 'btn-dark',
                    actionsBox: true,
                    selectedTextFormat: 'count',
                    noneSelectedText: 'All users'
                });
                select.selectpicker('render');
                select.selectpicker('selectAll');
            }
        });

        function dataSecondsToHours(data) {
            $.each(data.series, function (i, series) {
                series.data = $.map(series.data, function (value) {
                    return value / 60 / 60;
                });
            });
        }

        function loadGraphsTab1(time_range, yaxis) {
            $('#days-selection').show();
            $('#months-selection').hide();

            setGraphFormat(yaxis);

            $.ajax({
                url: "get_plays_by_date",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    var dateArray = [];
                    $.each(data.categories, function (i, day) {
                        dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
                        // Highlight the weekend
                        if ((moment(day, 'YYYY-MM-DD').format('ddd') === 'Sat') ||
                            (moment(day, 'YYYY-MM-DD').format('ddd') === 'Sun')) {
                            hc_plays_by_day_options.xAxis.plotBands.push({
                                from: i-0.5,
                                to: i+0.5,
                                color: 'rgba(80,80,80,0.3)'
                            });
                        }
                    });
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_day_options.yAxis.min = 0;
                    hc_plays_by_day_options.xAxis.categories = dateArray;
                    hc_plays_by_day_options.series = getGraphVisibility(hc_plays_by_day_options.chart.renderTo, data.series);
                    hc_plays_by_day_options.colors = getGraphColors(data.series);
                    var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
                }
            });

            $.ajax({
                url: "get_plays_by_dayofweek",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
                    hc_plays_by_dayofweek_options.series = getGraphVisibility(hc_plays_by_dayofweek_options.chart.renderTo, data.series);
                    hc_plays_by_dayofweek_options.colors = getGraphColors(data.series);
                    var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
                }
            });

            $.ajax({
                url: "get_plays_by_hourofday",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_hourofday_options.xAxis.categories = data.categories;
                    hc_plays_by_hourofday_options.series = getGraphVisibility(hc_plays_by_hourofday_options.chart.renderTo, data.series);
                    hc_plays_by_hourofday_options.colors = getGraphColors(data.series);
                    var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
                }
            });

            $.ajax({
                url: "get_plays_by_top_10_platforms",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_platform_options.xAxis.categories = data.categories;
                    hc_plays_by_platform_options.series = getGraphVisibility(hc_plays_by_platform_options.chart.renderTo, data.series);
                    hc_plays_by_platform_options.colors = getGraphColors(data.series);
                    var hc_plays_by_platform = new Highcharts.Chart(hc_plays_by_platform_options);
                }
            });

            $.ajax({
                url: "get_plays_by_top_10_users",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id  },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_user_options.xAxis.categories = data.categories;
                    hc_plays_by_user_options.series = getGraphVisibility(hc_plays_by_user_options.chart.renderTo, data.series);
                    hc_plays_by_user_options.colors = getGraphColors(data.series);
                    var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options);
                }
            });

            $('#nav-tabs-plays').tab('show');
        }

        function loadGraphsTab2(time_range, yaxis) {
            $('#days-selection').show();
            $('#months-selection').hide();

            setGraphFormat(yaxis);

            $.ajax({
                url: "get_plays_by_stream_type",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    var dateArray = [];
                    $.each(data.categories, function (i, day) {
                        dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
                        // Highlight the weekend
                        if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
                            (moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) {
                            hc_plays_by_day_options.xAxis.plotBands.push({
                                from: i-0.5,
                                to: i+0.5,
                                color: 'rgba(80,80,80,0.3)'
                            });
                        }
                    });
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_stream_type_options.yAxis.min = 0;
                    hc_plays_by_stream_type_options.xAxis.categories = dateArray;
                    hc_plays_by_stream_type_options.series = getGraphVisibility(hc_plays_by_stream_type_options.chart.renderTo, data.series);
                    hc_plays_by_stream_type_options.colors = getGraphColors(data.series);
                    var hc_plays_by_stream_type = new Highcharts.Chart(hc_plays_by_stream_type_options);
                }
            });

            $.ajax({
                url: "get_concurrent_streams_by_stream_type",
                type: 'get',
                data: { time_range: time_range, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    var dateArray = [];
                    $.each(data.categories, function (i, day) {
                        dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
                        // Highlight the weekend
                        if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
                            (moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) {
                            hc_plays_by_day_options.xAxis.plotBands.push({
                                from: i-0.5,
                                to: i+0.5,
                                color: 'rgba(80,80,80,0.3)'
                            });
                        }
                    });
                    hc_concurrent_streams_by_stream_type_options.yAxis.min = 0;
                    hc_concurrent_streams_by_stream_type_options.xAxis.categories = dateArray;
                    hc_concurrent_streams_by_stream_type_options.series = getGraphVisibility(hc_concurrent_streams_by_stream_type_options.chart.renderTo, data.series);
                    hc_concurrent_streams_by_stream_type_options.colors = getGraphColors(data.series);
                    var hc_plays_by_stream_type = new Highcharts.Chart(hc_concurrent_streams_by_stream_type_options);
                }
            });

            $.ajax({
                url: "get_plays_by_source_resolution",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_source_resolution_options.xAxis.categories = data.categories;
                    hc_plays_by_source_resolution_options.series = getGraphVisibility(hc_plays_by_source_resolution_options.chart.renderTo, data.series);
                    hc_plays_by_source_resolution_options.colors = getGraphColors(data.series);
                    var hc_plays_by_source_resolution = new Highcharts.Chart(hc_plays_by_source_resolution_options);
                }
            });

            $.ajax({
                url: "get_plays_by_stream_resolution",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_stream_resolution_options.xAxis.categories = data.categories;
                    hc_plays_by_stream_resolution_options.series = getGraphVisibility(hc_plays_by_stream_resolution_options.chart.renderTo, data.series);
                    hc_plays_by_stream_resolution_options.colors = getGraphColors(data.series);
                    var hc_plays_by_stream_resolution = new Highcharts.Chart(hc_plays_by_stream_resolution_options);
                }
            });

            $.ajax({
                url: "get_stream_type_by_top_10_platforms",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_platform_by_stream_type_options.xAxis.categories = data.categories;
                    hc_plays_by_platform_by_stream_type_options.series = getGraphVisibility(hc_plays_by_platform_by_stream_type_options.chart.renderTo, data.series);
                    hc_plays_by_platform_by_stream_type_options.colors = getGraphColors(data.series);
                    var hc_plays_by_platform_by_stream_type = new Highcharts.Chart(hc_plays_by_platform_by_stream_type_options);
                }
            });

            $.ajax({
                url: "get_stream_type_by_top_10_users",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_user_by_stream_type_options.xAxis.categories = data.categories;
                    hc_plays_by_user_by_stream_type_options.series = getGraphVisibility(hc_plays_by_user_by_stream_type_options.chart.renderTo, data.series);
                    hc_plays_by_user_by_stream_type_options.colors = getGraphColors(data.series);
                    var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options);
                }
            });

            $('#nav-tabs-stream').tab('show');
        }

        function loadGraphsTab3(time_range, yaxis) {
            $('#days-selection').hide();
            $('#months-selection').show();

            setGraphFormat(yaxis);

            $.ajax({
                url: "get_plays_per_month",
                type: 'get',
                data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
                dataType: "json",
                success: function(data) {
                    if (yaxis === 'duration') { dataSecondsToHours(data); }
                    hc_plays_by_month_options.yAxis.min = 0;
                    hc_plays_by_month_options.xAxis.categories = data.categories;
                    hc_plays_by_month_options.series = getGraphVisibility(hc_plays_by_month_options.chart.renderTo, data.series);
                    hc_plays_by_month_options.colors = getGraphColors(data.series);
                    var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options);
                }
            });

            $('#nav-tabs-total').tab('show');
        }

        // Tab1 opened
        $('#nav-tabs-plays').on('shown.bs.tab', function (e) {
            e.preventDefault();
            current_tab = $(this).attr('href');
            setLocalStorage('graph_tab', current_tab.replace('#',''));
            loadGraphsTab1(current_day_range, yaxis);
        });

        // Tab2 opened
        $('#nav-tabs-stream').on('shown.bs.tab', function (e) {
            e.preventDefault();
            current_tab = $(this).attr('href');
            setLocalStorage('graph_tab', current_tab.replace('#',''));
            loadGraphsTab2(current_day_range, yaxis);
        });

        // Tab3 opened
        $('#nav-tabs-total').on('shown.bs.tab', function (e) {
            e.preventDefault();
            current_tab = $(this).attr('href');
            setLocalStorage('graph_tab', current_tab.replace('#',''));
            loadGraphsTab3(current_month_range, yaxis);
        });

        // Date range changed
        $('#graph-days').tooltip({ container: 'body', placement: 'top', html: true });
        $('#graph-days').on('change', function() {
            forceMinMax($(this));
            current_day_range = $(this).val();
            setLocalStorage('graph_days', current_day_range);
            if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
            if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
            $('.days').text(current_day_range);
        });
        
        // Month range changed
        $('#graph-months').tooltip({ container: 'body', placement: 'top', html: true });
        $('#graph-months').on('change', function() {
            forceMinMax($(this));
            current_month_range = $(this).val();
            setLocalStorage('graph_months', current_month_range);
            if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, yaxis); }
            $('.months').text(current_month_range);
        });

        let graph_user_last_id = undefined;

        // User changed
        $('#graph-user').on('change', function() {
            let val = $(this).val();
            if (val.length === 0 || val.length === $(this).children().length) {
                selected_user_id = null; // if all users are selected, just send an empty list
            } else {
                selected_user_id = val.join(",");
            }
            if (selected_user_id === graph_user_last_id) {
                return;
            }
            graph_user_last_id = selected_user_id;
            if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
            if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
            if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, yaxis); }
        });
        
        // Y-axis changed
        $('#yaxis-selection').on('change', function() {
            yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
            setLocalStorage('graph_type', yaxis);
            if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
            if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
            if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, yaxis); }
        });

        function setGraphFormat(type) {
            if (type === 'plays') {
                yaxis_format = function() { return this.value; };
                tooltip_format = function() {
                    if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
                        var s = '<b>'+ moment(this.x).format('ddd MMM D') +'</b>';
                    } else {
                        var s = '<b>'+ this.x +'</b>';
                    }
                    if (this.points.length > 1) {
                        var total = 0;
                        $.each(this.points, function(i, point) {
                            if (point.series.name === 'Total') return;
                            s += '<br/>'+point.series.name+': '+point.y;
                            total += point.y;
                        });
                        s += '<br><b>Total: '+total+'</b>';
                    } else {
                        $.each(this.points, function(i, point) {
                            s += '<br/>'+point.series.name+': '+point.y;
                        });
                    }
                    return s;
                }
                stack_labels_format = function() {
                    return this.total;
                }
                $('.yaxis-text').html('Play count');
            } else {
                yaxis_format = function() { return moment.duration(this.value, 'hours').format('H [h] m [m]'); };
                tooltip_format = function() {
                    if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
                        var s = '<b>'+ moment(this.x).format('ddd MMM D') +'</b>';
                    } else {
                        var s = '<b>'+ this.x +'</b>';
                    }
                    if (this.points.length > 1) {
                        var total = 0;
                        $.each(this.points, function(i, point) {
                            if (point.series.name === 'Total') return;
                            s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'hours').format('D [days] H [hrs] m [mins]');
                            total += point.y;
                        });
                        s += '<br/><b>Total: '+moment.duration(total, 'hours').format('D [days] H [hrs] m [mins]')+'</b>';
                    } else {
                        $.each(this.points, function(i, point) {
                            s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'hours').format('D [days] H [hrs] m [mins]');
                        });
                    }
                    return s;
                }
                stack_labels_format = function() {
                    var s = moment.duration(this.total, 'hours').format('H [h] m [m]');
                    return s;
                }
                $('.yaxis-text').html('Play duration');
            }

            hc_plays_by_day_options.xAxis.plotBands = [];
            hc_plays_by_stream_type_options.xAxis.plotBands = [];
            hc_concurrent_streams_by_stream_type_options.xAxis.plotBands = [];

            hc_plays_by_day_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_dayofweek_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_hourofday_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_platform_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_user_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_stream_type_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_source_resolution_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_stream_resolution_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_platform_by_stream_type_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_user_by_stream_type_options.yAxis.labels.formatter = yaxis_format;
            hc_plays_by_month_options.yAxis.labels.formatter = yaxis_format;

            hc_plays_by_day_options.tooltip.formatter = tooltip_format;
            hc_plays_by_dayofweek_options.tooltip.formatter = tooltip_format;
            hc_plays_by_hourofday_options.tooltip.formatter = tooltip_format;
            hc_plays_by_platform_options.tooltip.formatter = tooltip_format;
            hc_plays_by_user_options.tooltip.formatter = tooltip_format;
            hc_plays_by_stream_type_options.tooltip.formatter = tooltip_format;
            hc_plays_by_source_resolution_options.tooltip.formatter = tooltip_format;
            hc_plays_by_stream_resolution_options.tooltip.formatter = tooltip_format;
            hc_plays_by_platform_by_stream_type_options.tooltip.formatter = tooltip_format;
            hc_plays_by_platform_by_stream_type_options.yAxis.stackLabels.formatter = stack_labels_format;
            hc_plays_by_user_by_stream_type_options.tooltip.formatter = tooltip_format;
            hc_plays_by_user_by_stream_type_options.yAxis.stackLabels.formatter = stack_labels_format;
            hc_plays_by_month_options.tooltip.formatter = tooltip_format;
            hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
        }
    });
</script>
</%def>